<!-- 商品效期查询 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
    </el-button-group>
      <el-form inline :model="dataForm" label-width="100px" @keyup.enter.native="searchHandle">
        <el-form-item label="商品编码">
          <el-input v-model="dataForm.code"></el-input>
        </el-form-item>
        <el-form-item label="商品条码">
          <el-input v-model="dataForm.barcode"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="dataForm.ctgId">
            <el-option v-for="item in ctgOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select v-model="dataForm.expiryDateType">
            <el-option v-for="item in this.bizData.goodsValidityStatusData" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓位">
          <el-select v-model="dataForm.inStockId">
            <el-option v-for="item in stockOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓储数量">
          <el-row class="row-range">
            <el-col :span="11">
              <el-input v-model="dataForm.quantityMin"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.quantityMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="商品失效天数">
          <el-input v-model="dataForm.dateNum">
            <template slot="append">天内将失效</template>
          </el-input>
        </el-form-item>
        <el-form-item label="查看类型">
          <el-select v-model="dataForm.checkType">
            <el-option v-for="item in checkTypeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标准零售价格">
          <el-row class="row-range">
            <el-col :span="11">
              <el-input v-model="dataForm.priceMin" style="width: 100%;"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;"> - </el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.priceMax" style="width: 100%;"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" height="calc(100vh - 215px)" border v-loading="dataListLoading" :max-height="tableHeight">
          <el-table-column prop="code" label="商品编码" width="170"></el-table-column>
          <el-table-column prop="barcode" label="商品条码" width="160"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="ctgName" label="类别" width="60"></el-table-column>
          <el-table-column label="状态" width="60">
            <template slot-scope="scope">
              {{getStatusName(scope.row.expiryDateType)}}
            </template>
          </el-table-column>
          <el-table-column prop="dateNum" label="有效天数" width="80"></el-table-column>
          <el-table-column prop="invalidStr" label="失效日期" width="100"></el-table-column>
          <el-table-column prop="batch" label="批号" width="100"></el-table-column>
          <el-table-column prop="price" label="零售价格" width="80"></el-table-column>
          <el-table-column prop="inStockName" label="仓位" width="150"></el-table-column>
          <el-table-column prop="quantity" label="数量" width="50"></el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination" style="margin-bottom: 25px;">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import {filterParams} from '@/util/tools'

  import {inventoryDetailFetchList} from '@/api/eims/validity'

  import {getCtgList} from '@/api/eims/ctg'
  import {getStockList} from '@/api/eims/stock'
  import {mapGetters} from 'vuex'
  export default {
    data () {
      return {
        dataForm: {
          code: '',
          name: '',
          expiryDateType: '',
          ctgId: '',
          stockId: '',
          checkType: 1
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 200,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        ctgOptions: [],
        stockOptions: [],
        checkTypeOptions: [
          {label: '有效期有批号',value: 1},
          {label: '有效期无批号',value: 2},
          {label: '无效期有批号',value: 3},
          {label: '无效期无批号',value: 4},
          {label: '全部',value: 5},
        ]
      }
    },
    created () {
      this.getDataList()
      this.getCtgOptions()
      this.getStockOptions()
    },
    computed: {
      ...mapGetters(['permissions','bizData']),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      //  清空搜索表单
      searchReset() {
        for(let key in this.dataForm){
          if(key == 'checkType'){
            this.dataForm[key] = 1
          }else{
            this.dataForm[key] = ''
          }
        }
      },
      // 获取数据列表
      getDataList () {
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm)
        this.dataListLoading = true
        inventoryDetailFetchList(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      //  获取类型列表
      getCtgOptions() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //  获取仓位列表
      getStockOptions() {
        getStockList().then(response => {
          if(response.data.code == '0'){
            this.stockOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //  根据类型转换名字
      getStatusName(value) {
        let obj = {}
        obj = this.bizData.goodsValidityStatusData.find(item => {
          if(item.value == value){
            return item
          }
        })
        if(obj && obj.label){
          return obj.label
        }
      }
    }
  }
</script>
